<template>
	<view class="video-info">
		<view class="video-info-upload-pic">
			<view class="video-info-upload-box" v-if="!videoForm.image" @click="choseMainImg">
				<view>
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_add_pic02@2x.png"></image>
					<text>视频封面图</text>
				</view>
			</view>
			<view class="video-info-upload-active" v-else>
				<image :src="videoForm.image" mode="aspectFill"></image>
				<view>视频封面图</view>
				<view class="change" @click="choseMainImg">更换封面图</view>
			</view>
		</view>
		<view class="video-info-upload-video">
			<view class="video-info-upload-box" v-if="!videoForm.link" @click="addVideo">
				<view>
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_add_pic02@2x.png"></image>
					<text>视频资源</text>
				</view>
			</view>
			<view class="video-info-upload-active" v-else>
				<video :src="videoForm.link"></video>
				<view>视频资源</view>
				<view class="change" @click="addVideo">更换视频</view>
			</view>
			<progress :percent="percent" show-info stroke-width="3" v-if="is_uploading" />
		</view>
		<view class="video-info-info">
			<input placeholder="请输入视频标题" v-model="videoForm.name"/>
			<textarea placeholder="请输入视频描述" auto-height v-model="videoForm.brief"></textarea>
			<input type="number" placeholder="数字越大，排序越靠前(默认为0)" v-model="videoForm.sort"/>
		</view>
		<view class="video-info-btn">
			<text @click="submit">{{videoForm.video_id?'修改':'上传'}}</text>
		</view>
	</view>
</template>

<script>
	const md5 = require('../../static/utils/md5')
	import host from '@/api/config.js'
	export default {
		data() {
			return {
				id: '',
				videoForm: {
					name: '',
					brief: '',
					user_id: JSON.parse(uni.getStorageSync('userInfo')).user_id,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					image: '',
					sort: '',
					link: ''
				},
				uploadParameter: {},
				is_uploading: false,
				percent: 0
			};
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id
				uni.setNavigationBarTitle({
					title: '编辑视频'
				})
				this.getVideoInfo(options.id)
			}
			this.init()
		},
		methods: {
			getVideoInfo(id){
				this.$api.VideoList({video_id: id}).then(res => {
					let videoInfo = res.datas[0]
					this.videoForm = {
						video_id: videoInfo.video_id,
						name: videoInfo.name,
						brief: videoInfo.brief,
						user_id: videoInfo.user_id,
						store_id: videoInfo.store_id,
						image: videoInfo.image,
						sort: videoInfo.sort,
						link: videoInfo.link
					}
				})
			},
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			init(){
				let data = {}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					data.port = 'wechat'
				}else{
					data.port = 'h5'
				}
				// #endif
				
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						data.port = 'android'
					  break;
					case 'ios':
						data.port = 'ios'
					  break;
				}
				// #endif
				
				data.key = JSON.parse(uni.getStorageSync('userInfo')).token
				
				data.timestamp = Math.round(new Date() * 1000)
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5.hexMD5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				data.sign = obj
				this.uploadParameter = data
			},
			// 选择图片
			choseMainImg(){
				let _this = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						let imgs = []
						res.tempFiles.forEach(item => {
							imgs.push({
								uri: item.path
							})
						})
						uni.uploadFile({
							url: `${host}/api/Upimg/UpImg`,
							filePath: imgs[0].uri,
							name: 'file',
							formData: {
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign
							},
							success: (uploadFileRes) => {
								_this.videoForm.image = JSON.parse(uploadFileRes.data).datas[0]
							}
						});
					}
				})
			},
			// 添加视频
			addVideo(){
				let _this = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						_this.is_uploading = true
						let uploadTask = uni.uploadFile({
							url: `${host}/api/Upimg/UpVideo`,
							filePath: res.tempFilePath,
							name: 'file',
							formData: {
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign
							},
							success: (uploadFileRes) => {
								if(uploadFileRes.data){
									_this.is_uploading = false
									_this.videoForm.link = JSON.parse(uploadFileRes.data).datas
								}
							}
						});
						uploadTask.onProgressUpdate((uploadPress) => {
							_this.percent = uploadPress.progress
						})
					}
				});
			},
			submit(){
				if(this.videoForm.video_id){
					this.$api.UpVideo(this.videoForm).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}else{
					this.$api.AddVideo(this.videoForm).then(res => {
						uni.showToast({
							icon: 'none',
							title: '添加成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFF;
	}
	@import  '../../static/scss/video.scss'
</style>